<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>项目详情</title>    
    <link href="../css/mui.min.css" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" href="../css/swiper.min.css"/>
   	<link rel="stylesheet" type="text/css" href="../css/mgPublic.css"/>
   	<link rel="stylesheet" type="text/css" href="../css/mggj.css"/>
    <link rel="stylesheet" type="text/css"/>
    <style type="text/css">
    	body{background-color: #f5f5f5;}
    	.mui-scroll-wrapper{top: 44px; bottom: 51px;}
    	.swiper-container {
        width: 100%;
        height: 100%;
	    }
	    .swiper-slide {
	        text-align: center;
	        font-size: 18px;
	        background: #fff;
	        
	        /* Center slide text vertically */
	        display: -webkit-box;
	        display: -ms-flexbox;
	        display: -webkit-flex;
	        display: flex;
	        -webkit-box-pack: center;
	        -ms-flex-pack: center;
	        -webkit-justify-content: center;
	        justify-content: center;
	        -webkit-box-align: center;
	        -ms-flex-align: center;
	        -webkit-align-items: center;
	        align-items: center;
	    }
	    .mui-popover.mui-popover-action .mui-table-view{margin: 0;}
    </style>
</head>
<body>
<header class="mui-bar mui-bar-nav head_bar">
   <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">项目详情</h1>
    <a href="#share" class="mui-icon iconfont icon-fenxiang mui-pull-right head_right_ico"></a>
    <a class="mui-icon iconfont icon-shoucang mui-pull-right head_right_ico"></a>
</header>
<div class="mui-content">
    <div class="mui-scroll-wrapper" id="mui-scroll">
        <div class="mui-scroll">
            <div class="mui-card project_list_card project_detail_card">
				<div class="mui-card-header mui-card-media">
					<div class="mui-media-body">
						<b>Pink</b>
						<p>分享有价值的时尚观</p>
					</div>
				</div>
				<div class="mui-card-content">
					<img src="../images/index/project_list_img.png" alt="" width="100%">
				</div>	
				<div class="mui-card-footer">
					<p class="card_footer">项目名称：Pink <span>分享有价值的时尚观</span></p>
				</div>
			</div>
			<div class="mui-card project_list_card project_detail_card">
				<div class="mui-card-header mui-card-media">
					<div class="mui-media-body">
						<b>股权融资中</b>
					</div>
				</div>
				<div class="mui-card-content">
					<div class="detail_card_content">
						<div class="progress_box prgs_margin">
							<div class="progress_parent">
								<div class="progress_child"></div>
							</div>
							<div class="progress_text_box"><span class="financed">已融资50万</span><span class="progress_text">当前进度87%</span></div>
						</div>
					</div>
				</div>	
				<div class="mui-card-footer has_bg_card_footer">
					<dl>
						<dt>120人</dt>
						<dd>已投资</dd>
					</dl>
					<dl>
						<dt>￥10万</dt>
						<dd>起投金额</dd>
					</dl>
					<dl>
						<dt>￥100万</dt>
						<dd>总投资金额</dd>
					</dl>
				</div>
			</div>
			<div class="detail_swiper">
				<div class="swiper-container">
			        <div class="swiper-wrapper">
			            <div class="swiper-slide">
			            	<div class="detail_swiper_con">
			            		<img src="../images/index/detail_swiper_ico_1.png"/>
			            		<p class="detail_swiper_p">案例介绍</p>
			            	</div>
			            </div>
			            <div class="swiper-slide">
			            	<div class="detail_swiper_con">
			            		<img src="../images/index/detail_swiper_ico_2.png"/>
			            		<p class="detail_swiper_p">项目优势</p>
			            	</div>
			            </div>
			            <div class="swiper-slide">
			            	<div class="detail_swiper_con">
			            		<img src="../images/index/detail_swiper_ico_3.png"/>
			            		<p class="detail_swiper_p">预计回报</p>
			            	</div>
			            </div>
			            <div class="swiper-slide">
			            	<div class="detail_swiper_con">
			            		<img src="../images/index/detail_swiper_ico_4.png"/>
			            		<p class="detail_swiper_p">XXXX</p>
			            	</div>
			            </div>
			            <div class="swiper-slide">
			            	<div class="detail_swiper_con">
			            		<img src="../images/index/detail_swiper_ico_1.png"/>
			            		<p class="detail_swiper_p">案例介绍</p>
			            	</div>
			            </div>
			            <div class="swiper-slide">
			            	<div class="detail_swiper_con">
			            		<img src="../images/index/detail_swiper_ico_2.png"/>
			            		<p class="detail_swiper_p">项目优势</p>
			            	</div>
			            </div>
			            <div class="swiper-slide">
			            	<div class="detail_swiper_con">
			            		<img src="../images/index/detail_swiper_ico_3.png"/>
			            		<p class="detail_swiper_p">预计回报</p>
			            	</div>
			            </div>
			            <div class="swiper-slide">
			            	<div class="detail_swiper_con">
			            		<img src="../images/index/detail_swiper_ico_4.png"/>
			            		<p class="detail_swiper_p">XXXX</p>
			            	</div>
			            </div>
			        </div>
			        <!-- Add Arrows -->
			        <div class="swiper-button-next"></div>
			        <div class="swiper-button-prev"></div>
			    </div>
			</div>
			<div class="mui-card project_list_card project_profile">
				<div class="mui-card-header">页眉</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						项目独特市场定位、且潜力巨大的市场空间，务实且掌握行业未来格局的团队。电商行业将进入一个全面消费升级时代，pink僵尸其中标志性领军代表。
					</div>
				</div>
			</div>
			<div class="mui-card project_list_card equity_dynamics">
				<div class="mui-card-header">页眉</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<div class="project_profile">
							<ul>
								<li><a href="javascript:;">
									<time>2016-03-20</time>
									<p>pink公布或就诺天使基金投资20万</p>
								</a></li>
								<li><a href="javascript:;">
									<time>2016-03-26</time>
									<p>XXX加入融资10万</p>
								</a></li>
								<li><a href="javascript:;">
									<time>2016-03-29</time>
									<p>pink公布或就诺天使基金投资20万</p>
								</a></li>
								<li><a href="javascript:;">
									<time>2016-03-30</time>
									<p>pink公布或就诺天使基金投资20万</p>
								</a></li>
								<li><a href="javascript:;">
									<time>2016-03-33</time>
									<p>pink公布盈利20万</p>
								</a></li>
							</ul>
						</div>
					</div>
				</div>
			</div>
        </div>
    </div>
    <nav class="mui-bar mui-bar-tab detail_bottom_nav">
        <a class="mui-tab-item mui-active">
            <span class="mui-icon iconfont icon-bohao"></span>
            <span class="mui-tab-label">一键拨号</span>
        </a>
        <a class="mui-tab-item" href="online_message.html">
            <span class="mui-icon iconfont icon-liuyan"></span>
            <span class="mui-tab-label">在线留言</span>
        </a>
        <a class="mui-tab-item mui-btn mui-btn-primary" href="Purchase-item-payment.html">
            <span class="mui-tab-label">一键购买</span>
        </a>
    </nav>
</div>
<div id="share" class="mui-popover mui-popover-bottom mui-popover-action mm_botttom_box">
	<ul class="mui-table-view mui-grid-view mui-grid-9">
		<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
		    <a href="#">
		        <span class="mui-icon">
		        	<img src="../images/index/weixin_ico.png"/>
		        </span>
		        <div class="mui-media-body">微信好友</div>
		    </a>
		</li>
		<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
		    <a href="#">
		        <span class="mui-icon">
		        	<img src="../images/index/friend_ico.png"/>
		        </span>
		        <div class="mui-media-body">微信朋友圈</div>
		    </a>
		</li>
		<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
		    <a href="#">
		        <span class="mui-icon">
		        	<img src="../images/index/qq_kj_ico.png"/>
		        </span>
		        <div class="mui-media-body">QQ空间</div>
		    </a>
		</li>
		<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
		    <a href="#">
		        <span class="mui-icon">
		        	<img src="../images/index/qq_ico.png"/>
		        </span>
		        <div class="mui-media-body">QQ</div>
		    </a>
		</li>
		<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
		    <a href="#">
		        <span class="mui-icon">
		        	<img src="../images/index/tent_ico.png"/>
		        </span>
		        <div class="mui-media-body">腾房微博</div>
		    </a>
		</li>
		<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
		    <a href="#">
		        <span class="mui-icon">
		        	<img src="../images/index/xinlang_ico.png"/>
		        </span>
		        <div class="mui-media-body">新浪微博</div>
		    </a>
		</li>
   </ul>
   <div class="cancel_box"><a href="#share" class="mui-btn mui-btn-grey mui-btn-block cancel_btn">取消</a></div>
</div>
<script src="../js/mui.min.js"></script>
<script src="../js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
mui.init({
	statusBarBackground:'#fff'
});
mui("#mui-scroll").scroll();
 var swiper = new Swiper('.swiper-container', {
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    slidesPerView:4,
    //paginationClickable: true,
    spaceBetween:0
});

document.querySelector('.icon-shoucang').addEventListener("tap",function(){
	var thisCls=this.className;
	this.className=/ active/.test(thisCls)?thisCls.replace(/ active/,""):thisCls+" active";
});
</script>	
</body>
</html>